<template>
  <div class="nb-header">
    <div class="nb-header-top">
      <div>登录</div>
      <router-link class="nb-header-top-ipt" tag="div" to="/search"></router-link>
      <div>列表</div>
    </div>
    <ul class="nb-header-bottom">
      <router-link
        tag="li"
        class="nb-header-bottom-item"
        active-class="current"
        :key="tab.path"
        v-for="tab in tabs"
        :to="tab.path"
      ><span v-if="flag">{{tab.title}}</span></router-link>
      <router-link
        tag="li"
        :key="item.path"
        v-for="item in items"
        :to="item.path"
      >
        <span 
        @click="jump" 
        v-if="flag"
       >{{item.title}}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>


export default {
  props: {
    tabs: Array,
    items: Array
  },
  methods: {
    jump () {
      this.$router.push({
        path: '/xia'
      })
    }
  },
  data () {
    return {
      flag: true,
      
      
    }
  },
  watch: {
    $route (to, from) {
      console.log('to=' + to.path)
      if (to.path === '/xia') {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .nb-header {
    height: 80px;
    position: relative;
    z-index: 1;
    &-top {
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
        &-ipt {
        width: 80%;
        height: 70%;
        border-radius: 15px;
        border: 1px solid #999;
        display: flex;
        justify-content: center;
        background: #ccc;
      }
    }
    &-bottom {
      height: 30px;
      display: flex;
      justify-content: space-around;
      font-size: 13px;
      padding-top: 10px;
    }
  }
  .current {
    color:#FF1493;
    border-bottom: 2px solid #FF1493;
  }
</style>
